<template>
	<view class="kind">
		<view class="cu-bar bg-white search" style="padding-top: 100rpx;padding-bottom: 20rpx;">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input type="text" placeholder="搜索课程" confirm-type="search" @click="gotoSearch"></input>
			</view>
		</view>
		<view class="">
			<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
				<view class="cu-item" :class="index==TabCur?'text-green cur':''" v-for="(item,index) in tabList" :key="index" @tap="tabSelect" :data-id="index" :data-content="item">
					{{item}}
				</view>
			</scroll-view>
			<view class="">
				<view class="publicContent">
					<view class="content_one" v-for="item in moreListData" :key="item.id" @click="gotovideodetail(item.id)">
						<image :src="item.image_url" mode=""></image>
						<view class="others">
							<h3>{{item.name}}</h3>
							<text style="font-size: 26rpx;">教师:{{item.teacher_name}}</text>
							<uni-rate v-model="item.grade" :readonly="true" :is-fill="false" :max="5" allow-half :size="16"/>
							<view class="content_oneBottom">
								<text style="font-size: 26rpx;margin-top: 6rpx;">{{item.add_time}}</text>
								<view class="bottom_right">
									<text class="lg text-gray cuIcon-attentionfavor">{{item.click_nums}}</text>
									<text class="lg text-gray cuIcon-appreciate">{{item.give_like_nums}}</text>
								</view>
							</view>
						</view>
					</view>
					<view v-if="isover" class="b_bottom text-center" style="padding-bottom: 20rpx;">
						----已经到底了-----
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value:2,
				TabCur: 0,
				scrollLeft: 0,
				tabList:['公开课','我的部门','其他部门'],
				department:'',
				moreListData:[],
				page:1,
				total:0,
				isover:false,
			};
		},
		onLoad() {
			this.getDepartDataList()
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				this.department = e.currentTarget.dataset.content
				this.moreListData = []
				this.page = 1
				this.total = 0
				this.getKindData()
			},
			async getDepartDataList(){
				// let res = await this.$myRuquest({
				// 	url:'/departments/'
				// })
				this.department = this.tabList[0]
				this.getKindData()
			},
			async getKindData(){
				let res = await this.$myRuquest({
					url:`/list_courses/?page=${this.page}`,
					data:{department:this.department}
				})
				this.total = res.data.count
				this.moreListData = [...this.moreListData,...res.data.results]
			},
			onReachBottom() {
				if(this.moreListData.length>=this.total) return this.isover = true
				this.page++
				this.getKindData()
			},
			gotovideodetail(id){
				uni.navigateTo({
				    url: `../videodetail/videodetail?id=${id}`
				});
			},
			gotoSearch(){
				uni.navigateTo({
					url:'/pages/search/search?area=kind'
				})
			}
		}
	}
</script>

<style lang="scss">
.kind{
	.publicContent{
		padding: 10rpx 10rpx;
		.content_one{
			display: flex;
			padding: 30rpx 30rpx;
			margin-bottom: 20rpx;
			background: white;
			border-radius: 20rpx;
			image{
				width: 185rpx;
				height: 132rpx;
				border-radius: 15rpx;
			}
			.others{
				width: 565rpx;
				height: 132rpx;
				padding-left: 30rpx;
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				.content_oneBottom{
					display: flex;
					justify-content: space-between;
					.bottom_right{
						padding-left: 50rpx;
					}
				}
			}
		}
	}
}
</style>
